<template>
    <div>
        <div class="handle-box financing_box">
            <div class="handle-filter clearfix">
                <div class="filter-item">
                    <el-form :inline="true" :model="formTime" class="demo-form-inline">
                        <el-form-item class="account_type mr40">
                            <el-select v-model="formTime.type">
                                <el-option label="全部" value="1"></el-option>
                                <el-option label="收入" value="2"></el-option>
                                <el-option label="支出" value="3"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="按时间查询：">
                            <el-date-picker
                            v-model="formTime.time"
                            type="datetimerange"
                            align="right"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['00:00:00', '23:59:59']"
                            ></el-date-picker>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary">搜索</el-button>
                            <el-button type="info" plain>清空</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
        <div class="financing_cont">
            <el-table
                :data="tableData"
                border
                class="table"
                ref="multipleTable"
            >
                <el-table-column prop="id" label="序号" width="80" align="center">
                    <template slot-scope="scope">
                        {{ scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="客户端" align="center">
                    <template slot-scope="scope">
                        <div>{{scope.row.type == 1 ? 'PC端' : 'APP端'}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="updateTime" label="更新时间" align="center"></el-table-column>
                <el-table-column prop="versionCode" label="版本号" align="center"></el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" @click="dialogDetail = true">查看详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog
            title="版本详情"
            :visible.sync="dialogDetail"
            width="40%"
        >
            <span>{{dialogContent}}</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogDetail = false" type="primary">关 闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            dialogDetail: false,
            dialogContent: '微信，是一个生活方式 安装微信Mac版后，用户需使用微信扫描电脑上的二维码并确认后即可登录；产品使用流程、功能皆和微信网页版相',
            formTime: {
                type: '',
                time: ''
            },
            tableData: [
                {
                    type: '1',
                    updateTime: '2019-05-04',
                    versionCode: 'V1.3.1'
                },
                {
                    type: '1',
                    updateTime: '2019-05-04',
                    versionCode: 'V1.3.1'
                }
            ]
        };
    }
}
</script>

<style scoped lang="scss">
.mr40 {
    margin-right: 40px;
}
.account_type {
    width: 90px;
}
.table {
    width: 60%;
    min-width: 600px;
}
</style>